import React from 'react'
import Styled from 'styled-components'
import {
  Table, Icon, Label, Image,
} from 'semantic-ui-react'

export const TableDeleteButton = Styled(Label)`
  margin-left: 2em!important;
  padding: 0px!important;
  color: #2185d0!important;
  background-color: #fff!important;
  i {
    margin-right: .5em!important;
  }
`

export const OptionIcon = Styled(Icon)`
  margin-left: 1em!important;
  cursor: pointer;
`

export const OptionImage = Styled(Image)`
  margin-left: 1em!important;
  cursor: pointer;
  width: 25px!important;
  height: 25px!important;
`

export const ActionImage = Styled(Image)`
  cursor: pointer;
  width: 25px!important;
  height: 25px!important;
`

export const TableRow = Styled(Table.Row)`
  :hover {
    background-color: #f6faff!important;
  }
  .first-cell {
    padding-left: 3em!important;
  }
  .last-cell {
    padding-right: 3em!important;
  }
  .options {
    display: none!important;
  }
  :hover .options {
    display: inline!important;
  }
  .avatar {
    cursor: pointer;
  }
`
